@import (inline) "base.css";
@import (reference) "header";
.header{
  .header();
}
.main{
  padding-top: 60px;
  overflow: hidden;
}
//介绍
.book-main{
  width: 100%;
  height: auto;
  background: #4C3930;
  color: white;
  padding: 0.23rem 0.15rem 0.15rem;
}
.details{
  display: flex;
  .book-img{
    width: 1rem;
    margin-right: 0.15rem;
    img{
      width: 100%;
    }
  }
  .title{
    h2{
      font-size: 0.23rem;
      font-weight: normal;
    }
    .ranking{
      font-size: 0.13rem;
      display: flex;
      margin: 0.10rem 0;
      span{
        padding: 0.05rem 0.08rem;
        color: #9D5F00;
      }
      span:first-child{
        background: #FFF2D1;
        border-radius: 0.05rem 0 0 0.05rem;
      }
      span:last-child{
        background: #FFCC85;
        border-radius: 0 0.05rem 0.05rem 0;
      }
    }
    p{
      font-size: 0.11rem;
      color: rgba(255,255,255,0.7);
      margin-bottom: 0.1rem;
    }
    .idea{
      display: flex;
      margin-bottom: 0.2rem;
      a{
        display: flex;
        width: 0.7rem;
        height: 0.3rem;
        background: #fff;
        border-radius: 0.05rem;
        align-items: center;
        justify-content: center;
        font-size: 0.13rem;
        margin-right: 0.1rem;
        .icon{
          width: 0.14rem;
          height: 0.14rem;
          background: url("../images/other/want.png") no-repeat;
          background-size: 100% 100%;
          margin-right: 0.05rem;
        }
        .ing{
          background-image: url("../images/other/ing.png");
        }
        .done{
          background-image: url("../images/other/done.png");
        }
      }
    }
  }
}
.score{
  width: 100%;
  background: #44332B;
  border-radius: 0.07rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0.10rem 0.16rem 0.13rem 0.18rem;
  .trademark{
    width: 100%;
    height: 0.3rem;
    display: flex;
    justify-content: space-between;
    font-size: 0.11rem;
    a{
      display: flex;
      height: 100%;
      border: 1px solid #fff;
      border-radius: 0.05rem;
      color: white;
      padding: 0.08rem 0.1rem;
      align-items: center;
    }
    span{
      position: relative;
      em{
        font-size: 0.1rem;
        position: absolute;
        top: 0;
        right: -16px;
        transform: scale(0.7);
      }
    }
    .grey-pen{
      display: inline-block;
      width: 0.1rem;
      height: 0.12rem;
      background: url("../images/other/grey-pen.png") no-repeat;
      background-size: 100% 100%;
      margin-right: 0.02rem;
    }
  }
  .rating{
    width: 50%;
    padding-top: 0.1rem;
    display: flex;
    position: relative;
    .score-num{
      font-size: 0.36rem;
      margin-right: 0.08rem;
    }
    .star-display{
      .stars{
        width: 100%;
        display: flex;
        span{
          width: 0.13rem;
          height: 0.13rem;
        }
      }
      p{
        font-size: 0.12rem;
        margin-top: 0.08rem;
        transform: scale(0.9);
      }
    }
    &:after{
      content: '';
      width: 1px;
      height: 200%;
      background: rgba(255,255,255,0.2);
      position: absolute;
      top: -50%;
      right: 0;
      transform: scaleY(0.5);
    }
  }
  .chart{
    width: 50%;
    padding-top: 0.08rem;
    .star-stats{
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .stars-wrap{
        display: flex;
        span{
          width: 0.07rem;
          height: 0.07rem;
        }
      }
      .chart-wrap{
        width: 1rem;
        height: 0.03rem;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 0.03rem;
        display: flex;
        margin: 0.01rem 0 0 0.05rem;
        span{
          height: 100%;
          background: #FFAC2C;
          border-radius: 0.03rem;
        }
      }
    }
  }
}
.trial{
  background: rgba(0, 0, 0, 0.1);
  border-radius: 0.05rem;
  margin-top: 0.1rem;
  font-size: 0.13rem;
  padding: 0.13rem 0.15rem;
  display: flex;
  justify-content: space-between;
  a{
    color: #C6C1BE;
  }
}
//简介
.book-brief{
  padding: 0.15rem;
  .brief-title{
    font-size: 0.15rem;
    color: #818181;
    margin-bottom: 0.15rem;
  }
  .brief-cont{
    color: #191919;
    a{
      float: right;
    }
  }
}
//展开说明文字
.comment-text{
  font-size: 0.15rem;
  line-height: 0.22rem;
  text-align: justify;
}
//展开/收起按钮
.open{
  color: #42BD56;
}
//分割线
.split{
  height: 0.1rem;
  background: #efefef;
}
//短评
.evaluates{
  padding: 0.15rem 0.15rem 0;
  .ev-header{
    font-size: 0.15rem;
    color: #818181;
    display: flex;
    justify-content: space-between;
    //margin-bottom: 0.15rem;
    .ev-write{
      font-size: 0.13rem;
      color: #818181;
      display: flex;
      align-items: center;
    }
  }
  .comment-list{
    width: 100%;
    ul{
      width: 100%;
    }
    li{
      width: 100%;
      padding-top: 0.15rem;
    }
    .desc{
      display: flex;
      align-items: center;
      margin-bottom: 0.05rem;
      a{
        width: 0.2rem;
        height: 0.2rem;
        margin-right: 0.1rem;
        img{
          width: 100%;
          border-radius: 50%;
        }
      }
      .user-info{
        display: flex;
        align-items: center;
        div{
          margin-right: 0.05rem;
        }
        .stars{
          display: flex;
          span{
            width: 0.13rem;
            height: 0.13rem;
          }
        }
        .date{
          margin-left: 0.05rem;
          font-size: 0.11rem;
          color: #c0c0c0;
        }
      }
    }
    .comment-content{
      margin-left: 0.3rem;
      p{
        color: #494949;
        padding-right: 0.15rem;
      }
    }
    .btn-info{
      margin: 0.1rem 0.15rem 0 0.3rem;
      padding-bottom: 0.15rem;
      display: flex;
      justify-content: space-between;
      position: relative;
      .btn-like{
        display: flex;
        span{
          font-size: 0.14rem;
          color: #ccc;
          margin-left: 0.03rem;
        }
      }
      .btn-more{
        i{
          display: inline-block;
        }
      }
      &:after{
        content: '';
        width: 250%;
        height: 1px;
        background: #ccc;
        position: absolute;
        left: -190px;
        bottom: 0;
        transform: scale(0.5);
      }
    }
  }
  .ora-wrap{
    padding: 0.1rem 0;
    a{
      display: inline-block;
      width: 100%;
      height: 0.4rem;
      line-height: 0.4rem;
      text-align: center;
      font-size: 0.15rem;
      color: #fff;
      background: rgb(66, 189, 86);
      border-radius: 0.4rem;
    }
  }
}
//最后一个 li btn
.evaluates .comment-list li:last-child  .btn-info:after{
  left: -234px;
}
//讨论
.discuss{
  .reply{
    color: #818181;
    font-size: 0.14rem;
    margin-top: 0.05rem;
  }
}
//讨论以及读书笔记
.evaluates .litter{
  li{
    padding: 0.15rem  0;
    position: relative;
    &:after{
      content: '';
      width: 250%;
      height: 1px;
      background: #ccc;
      position: absolute;
      left: -216px;
      bottom: 0;
      transform: scale(0.5);
    }
  }
  li:last-child{
    &:after{
      left: -234px;
    }
  }
}
//读书
.note .user-info {
  div{
    font-size: 0.13rem;
    color: #818181;
  }
}
//书评
.review{
  .user-info {
    div{
      font-size: 0.13rem;
      color: #818181;
    }
  }
  .comment-content{
    margin: 0 0 0.1rem !important;
  }
  .comment-title{
    font-size: 0.17rem;
    font-weight: 500;
    color: #191919;
  }
  .comment-info{
    font-size: 0.11rem;
    color: #818181;
  }
}

//喜欢这本书的人也喜欢
.books-rec{
  padding: 0.15rem;
  .rec-title{
    font-size: 0.15rem;
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.15rem;
    span{
      color: #818181;
    }
    a{
      color: #42bd56;
    }
  }
  .rec-list{
    ul{
      width: 100%;
      display: flex;
      justify-content: space-around;
    }
    li{
      width: 0.78rem;
      text-align: center;
      div{
        width: 100%;
        height: 1.1rem;
        img{
          height: 100%;
          border-radius: 0.05rem;
        }
      }
      span{
        font-size: 0.11rem;
        font-weight: 500;
        color: #191919;
      }
    }
  }
}